<template>
  <text class="iconfont" :class="`icon-${name}`" :style="iconStyle"></text>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: 30
  },
  color: {
    type: String,
    default: '#333'
  }
});

const iconStyle = computed(() => ({
  fontSize: `${props.size}rpx`,
  color: props.color
}));
</script>